{extend name='admin@public/content'}
{block name="style"}
<style>
    .jungshen_uploadfile{width:30px;height:30px;position:absolute;top:4px;right:20px;}
</style>
{/block}
{block name="content"}
<form autocomplete="off" onsubmit="return false;" action="{:request()->url()}" data-auto="true" method="post" class='form-horizontal layui-form padding-top-20'>

    <div class="form-group">
        <label class="col-sm-2 control-label">文章名称</label>
        <div class='col-sm-8'>
            <input autofocus name="title" value='{$vo.title|default=""}' required="required" title="请输入文章名称" placeholder="请输入文章名称" class="layui-input">
        </div>
    </div>

    <!--{if !empty($cates)}-->
    <div class="form-group">
        <label class="col-sm-2 control-label">文章分类</label>
        <div class='col-sm-8'>
            <select required class="layui-select full-width" name="type" lay-filter="type">
                {foreach $cates as $cate}
                <!--{eq name='$cate.id' value='$vo.type|default=0'}-->
                <option selected="selected" value="{$cate.id}">{$cate.title}</option>
                <!--{else}-->
                <option value="{$cate.id}">{$cate.title}</option>
                <!--{/eq}-->
                {/foreach}
            </select>
        </div>
    </div>
    <!--{/if}-->

    <div class="form-group childs_box">
        <label class="col-sm-2 control-label">扩展分类</label>
        <div class='col-sm-4'>
            <select required class="layui-select full-width childs_one" name="childs[]" lay-filter="childs_one"></select>
        </div>
        <div class='col-sm-4'>
            <select required class="layui-select full-width childs_two" name="childs[]" lay-filter="childs_two"></select>
        </div>
    </div>

    <!--<div class="form-group">
        <label class="col-sm-2 control-label label-required">图片</label>
        <div class='col-sm-8'>
            <table class="layui-table background-item margin-none" lay-size="sm" lay-skin="nob">
                <thead>
                <tr>
                    <td>文章图片</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="text-top" style="width:100px">
                        <input type="hidden" name="image" value="{$vo.image|default=''}">
                        <script>$('[name=image]').uploadOneImage()</script>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>-->

    <div class="form-group">
        <label class="col-sm-2 control-label">标签</label>
        <div class='col-sm-8'>
            {assign name="flag_arr" value="$Think.const.FLAG_ARR" /}
            {foreach $flag_arr as $flag_key=>$flag }
            <label class="think-checkbox"><input lay-ignore class="list-check-box" type="checkbox" {in name="flag_key" value="$vo['flag']|default=''"}checked{/in} value="{$flag_key}" name="flag[]"/> {$flag}</label>
            {/foreach}
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label">排序</label>
        <div class='col-sm-8'>
            <input name="sort" value='{$vo.sort|default="0"}'  title="请输入排序值" placeholder="请输入排序值" class="layui-input">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label label-required">图片</label>
        <div class='col-sm-8'>
            <table class="layui-table background-item margin-none" lay-size="sm" lay-skin="nob">
                <thead>
                <tr>
                    <td>图片</td>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td class="text-top">
                        <input type="hidden" name="images" value="{$vo.images|default=''}">
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script>
        $('input[name="images"]').uploadMultipleImage();
    </script>

    <div class="form-group">
        <label class="col-sm-2 control-label">视频地址</label>
        <div class='col-sm-8'>
            <input name="video_url" value='{$vo.video_url|default=""}'  title="请输入视频地址" placeholder="请输入视频地址或点击右边按钮上传文件" class="layui-input" type="text"/>
            <a data-file="one" data-field="video_url" data-type="mp4" class="uploadfile jungshen_uploadfile"></a>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label label-required">文章内容</label>
        <div class='col-sm-8'>
            <textarea name="content">{$vo.content|default=''|htmlspecialchars_decode}</textarea>
        </div>
    </div>

    <div class="hr-line-dashed"></div>

    <div class="col-sm-7 col-sm-offset-2">
        <div class="layui-form-item text-center">
            {if !empty($vo.id)}<input type="hidden" name="id" value="{$vo.id}">{/if}
            <button class="layui-btn" type="submit">保存</button>
            <button class="layui-btn layui-btn-danger" type='button' onclick="window.history.back()">取消</button>
        </div>
    </div>

    <script>
        require(['jquery', 'ckeditor', 'angular'], function () {
            window.form.render();
            window.createEditor('[name="content"]', {height: 500});
        });
        $(function(){
            page_init();
            //文章分类变更事件
            form.on('select(type)', function(data){
                var pid=0;
                if(data.value==19){
                    pid=32;
                }else if(data.value==22){
                    pid=33;
                }
                if(pid>0){
                    $('.childs_box').show();
                    //企业招聘
                    //查询工人邦分类
                    $.get('/api/other.system/my_cate_list',{pid:pid},function(data){
                        if(data.msg=='success'){
                            var obj=data.data;
                            $('.childs_one').html('<option value="">请选择</option>');
                            $('.childs_two').html('');
                            for(var i=0;i<obj.length;i++){
                                $('.childs_one').append('<option value="'+obj[i].id+'">'+obj[i].title+'</option>');
                            }
                            form.render('select');
                        }
                    });
                }else{
                    $('.childs_box').hide();
                    $('.childs_box select').html('');
                    form.render('select');
                }
            });
            //二级分类变更事件
            form.on('select(childs_one)', function(data){
                if(data.value>0){
                    $.get('/api/other.system/my_cate_list',{pid:data.value},function(data){
                        if(data.msg=='success'){
                            var obj=data.data;
                            $('.childs_two').html('');
                            for(var i=0;i<obj.length;i++){
                                $('.childs_two').append('<option value="'+obj[i].id+'">'+obj[i].title+'</option>');
                            }
                            form.render('select');
                        }
                    });
                }else{
                    $('.childs_two').html('');
                    form.render('select');
                }
            });

        });

        /**
         * 页面编辑初始化
         */
        function page_init(){
            var type={$vo['type']|default='0'};
            var childs_0={$vo['childs'][0]|default=0};
            var childs_1={$vo['childs'][1]|default=0};
            var pid=0;
            if(type==19){
                pid=32;
            }else if(type==22){
                pid=33;
            }
            if(pid>0){
                $('.childs_box').show();
                $.get('/api/other.system/my_cate_list',{pid:pid},function(data){
                    if(data.msg=='success'){
                        var obj=data.data;
                        $('.childs_one').html('<option value="">请选择</option>');
                        $('.childs_two').html('');
                        for(var i=0;i<obj.length;i++){
                            $('.childs_one').append('<option '+(obj[i].id==childs_0?'selected':'')+' value="'+obj[i].id+'">'+obj[i].title+'</option>');
                        }
                        $.get('/api/other.system/my_cate_list',{pid:childs_0},function(data){
                            if(data.msg=='success'){
                                var obj=data.data;
                                $('.childs_two').html('');
                                for(var i=0;i<obj.length;i++){
                                    $('.childs_two').append('<option '+(obj[i].id==childs_1?'selected':'')+' value="'+obj[i].id+'">'+obj[i].title+'</option>');
                                }
                                form.render('select');
                            }
                        });
                    }
                });
            }
        }
    </script>

    <style>
        .childs_box{display: none;}
        .background-item {
            padding: 15px;
            background: #efefef;
        }

        .background-item thead tr {
            background: #e0e0e0
        }
    </style>
</form>
{/block}